import { useState, useEffect, useMemo, useContext } from "react";
import ThemeContext from "@/utils/theme";
// function StudyHooks() {
const StudyHooks = () => {
  const [num, setNum] = useState(0);
  const [list, setList] = useState([]);

  const theme = useContext(ThemeContext);
  console.log("theme", theme);
  const add = () => {
    setNum(num + 1);
  };

  useEffect(() => {
    //执行各种副作用
    console.log("1---", num);
    return () => {
      console.log("2---", num);
    };
  }, [num]);

  const total = useMemo(() => {
    console.log("--重新执行");
    return num * 10 + 2 + 1;
  }, [num]);

  return (
    <div>
      <h2>学习hooks</h2>
      <p>{num} </p>
      <button onClick={add}>点击</button>
      <p>{total} </p>
      {/* <button onClick={() => setNum(num + 1)}>点击</button> */}
    </div>
  );
};

export default StudyHooks;
